<template>
  <el-container>
<!--    <el-aside style="width: 30%;margin-top: 20px">-->
<!--      <el-row class="tac">-->
<!--        <el-col :span="12">-->
<!--          <h3>批改作业</h3>-->
<!--          <el-menu-->
<!--            default-active="2"-->
<!--            class="el-menu-vertical-demo"-->
<!--            @open="handleOpen"-->
<!--            @close="handleClose">-->
<!--            <el-submenu v-for="(chap,index) in chaperlist" :key="index":index="index+''">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-s-management"></i>-->
<!--                <span slot="title"> {{chap.chaptername}} </span>-->
<!--              </template>-->
<!--              &lt;!&ndash;下面点击写一个去章节关联表根据章chapter搜索节&ndash;&gt;-->
<!--              &lt;!&ndash;sec.url 应该是地址 index和cnt不知道是啥&ndash;&gt;-->
<!--              <el-menu-item-->
<!--                @click.native="tosec(sec.url,index,cnt)"-->
<!--                v-for="(sec,cnt) in sessionlist"-->
<!--                :key="cnt"-->
<!--                :index="index+'-'+cnt">-->
<!--                {{ sec.sessionname }}-->
<!--              </el-menu-item>-->
<!--            </el-submenu>-->

<!--          </el-menu>-->
<!--        </el-col>-->
<!--      </el-row>-->



<!--    </el-aside>-->

    <el-main>
      <div class="course-area"  >
<!--                <div style="height: 50%;background-color: #8cc5ff">-->
        <el-row :gutter="20">
          <el-col :span="6">
            <div style="width: 400px;height: 350px;">
              <div id="pic1" style="width: 400px;height: 350px;"></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="margin-left: 50px;width: 400px;height: 350px;">
              <div id="pic2" style="width: 400px;height: 350px;"></div>
          </div>
          </el-col>
        </el-row>
        <!--          <div id="pic2" style="width: 400px;height: 350px;"></div>-->
        <!--        </div>-->
        <el-tabs type="border-card" style="margin-top: 10px">
          <el-tab-pane label="提交情况">

            <el-table
              :data="homeworklist"
              style="width: 100%"
              slot-scope="scope"
              :row-class-name="tableRowClassName">
<!--              <el-table-row :span="8" v-for="(o, index) in messagelist" :key="o" :offset="index > 0 ? 2 : 2">-->

<!--              <el-table-column-->
<!--                prop="id"-->
<!--                label="序号"-->
<!--                width="180">-->
<!--              </el-table-column>-->
              <el-table-column
                prop="studentname"
                label="学生名"
                width="180">
              </el-table-column>
                <el-table-column
                  prop="homeworkname"
                  label="作业名"
                  width="180">
                </el-table-column>
              <el-table-column
                prop="commit"
                label="作业提交"
                width="120">
                <template slot-scope="scope">
                  <div v-if = "scope.row.score==0">否</div>
                  <div v-if = "scope.row.score!=0">是</div>
                </template>
              </el-table-column>

              <el-table-column
                prop="score"
                label="成绩"
                width="150">
              </el-table-column>
              <el-table-column
                prop="check"
                label="下载附件"
                width="150">
                <template slot-scope="scope">
                  <div v-if = "scope.row.score==0">
                    <el-button type="primary" icon="el-icon-download" disabled>下载</el-button>
                  </div>
                  <div v-if = "scope.row.score!=0">
                    <el-button type="primary" icon="el-icon-download" @click="downloadStuHW(scope.row)" >下载</el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="score"
                label="评分"
                width="150">
                <template slot-scope="scope">
                <div v-if = "scope.row.score==0">
                  <el-button type="success" icon="el-icon-check"   disabled>评分</el-button>
                </div>
                <div v-if = "scope.row.score!=0">
                  <el-button type="success" icon="el-icon-check"  @click="setScore(scope.row)">评分</el-button>
                </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

<!--          <el-tab-pane label="成绩报告">-->
<!--            <el-table-->
<!--              :data="table2Data"-->
<!--              style="width: 100%"-->
<!--              :row-class-name="tableRowClassName">-->
<!--            <el-table-column-->
<!--              prop="studentname"-->
<!--              label="学生名"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="scope"-->
<!--              label="成绩"-->
<!--              width="180">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--          </el-tab-pane>-->
        </el-tabs>
      </div>
    </el-main>
    <el-dialog title="评分" :visible.sync="setScoreVisible" width="20%">
      分数：
      <el-input v-model="score" placeholder="请输入分数"></el-input>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="setScoreVisible = false">取 消</el-button>
        <el-button type="primary" @click="setScoreCommit()">确 定</el-button>
             </span>
    </el-dialog>
  </el-container>

</template>

<script>
    import echarts from 'echarts'
    export default {
        name: 'test',
        inject:['reload'],
        data () {
            return {
                homeworkid: window.sessionStorage.getItem('lessonid'),
                score:'',
                nowid:{},
                setScoreVisible:false,
                showname:JSON.parse(window.sessionStorage.getItem('iflogin')),
                studentlist:[],
                homeworklist:[],
                findNoCommit:[],
                findscope:[],
                lessonname:'课程数据1',
                lessonid:'1',
                chapterlist:[],
                sessionlist:[],

                charts: '',
                opinion:['已提交','未提交'],
                type: 'pie',
                opinionData:[
                    {value:400, name:'已提交'},
                    {value:600, name:'未提交'},
                ]
            }
        },

        mounted(){
            this.$nextTick(function() {
                this.drawPie('pic1')
                this.draw2Pie('pic2')
            })
        },

        created () {

            this.getCheckLessonStudent()
            this.getCheckLessonToStudent()
            this.getfindNoCommit()
            this.getfindscope()
            this.tijiao()
            this.checkfresh()

        },
        methods: {
          checkfresh()
          {
              console.log("-----freshtest--------")
              console.log( window.sessionStorage.getItem('freshneed') )
              console.log("------------------------")
              if( window.sessionStorage.getItem('freshneed')=='1')
              {
                  location.reload()
                  window.sessionStorage.setItem('freshneed', 0)
              }
          },
          downloadStuHW (row) {
              console.log("row.url")

              console.log(row.url)
            // for (var i = 0; i < this.allJoin.length; i++) {
            //   if (this.allJoin[i].tel === row.stuid) {
            //     this.flodes = this.allJoin[i].url
            //   }
            // }
            const urls = 'http://localhost:8443/images/' + row.url
            window.location.replace(urls)
          },
            setScore(row){
                this.setScoreVisible=true
                this.nowid=row
                // console.log("this.nowid.studentname")
                // console.log(this.nowid.scope)
                // console.log(this.nowid.id)

            },
            async setScoreCommit () {
                // console.log("this.nowid.studentname")
                // console.log(this.score)
                // console.log(this.nowid.id)
                this.$axios
                    .post('/scorecommit', {
                        id: this.nowid.id,
                        score:this.score
                    })
                    .then(successResponse => {
                        this.setScoreVisible=false
                        location.reload()
                        // this.homeworklist = successResponse.data
                        // console.log("---------------")
                        // console.log(this.homeworklist.scope)
                        // console.log("---------------")
                    })
                    .catch(failResponse => {
                    })
            },
            getCheckLessonToStudent() {
                this.$axios
                  .post('/lessontostudents', {
                      //等侧边栏做了可以通过点击章节然后存储下章节的id来搜索
                        id: this.homeworkid
                    })
                    .then(successResponse => {
                        this.homeworklist = successResponse.data
                        // console.log(this.studentlist.length+"??????//")
                        // console.log(this.homeworklist)
                        console.log("---------------")
                        console.log(this.homeworklist)
                        // console.log(this.homeworklist.scope)
                        // // console.log(window.sessionStorage.getItem('homeworklistlength'))
                        console.log("---------------")
                        // this.tijiao(this.studentlist.length,this.homeworklist.length)
                    })
                    .catch(failResponse => {
                    })

            },
            getCheckLessonStudent() {
                this.$axios
                    .post('/lessonstudents', {
                        id: this.homeworkid
                    })
                    .then(successResponse => {
                        this.studentlist = successResponse.data
                        // console.log("-------1-------")
                        // console.log(this.studentlist)
                        // console.log("---------------")

                        // window.sessionStorage.setItem('NoCommit', this.studentlist.length)
                    })
                    .catch(failResponse => {
                    })

            },
            getfindNoCommit() {
                this.$axios
                    .post('/findNoCommit', {
                        id: this.homeworkid
                    })
                    .then(successResponse => {
                        this.findNoCommit = successResponse.data

                        window.sessionStorage.setItem('NoCommit', this.studentlist.length-this.findNoCommit.length)
                        window.sessionStorage.setItem('Commit', this.findNoCommit.length)
                        // console.log(this.studentlist)
                    })
                    .catch(failResponse => {
                    })

            },
            getfindscope() {
                this.$axios
                    .post('/findscope', {
                        id: this.homeworkid
                    })
                    .then(successResponse => {
                        this.findscope = successResponse.data

                        window.sessionStorage.setItem('fail', this.studentlist.length-this.findscope.length)
                        window.sessionStorage.setItem('pass', this.findscope.length)
                        // console.log(this.studentlist)
                    })
                    .catch(failResponse => {
                    })

            },
            tijiao(studentlist,homeworklist){

                this.opinion1Data=[
                    {value:window.sessionStorage.getItem('Commit'), name:'已提交'},
                    {value:window.sessionStorage.getItem('NoCommit'), name:'未提交'},
                ],
                this.opinion2Data=[
                    {value:window.sessionStorage.getItem('pass'), name:'及格'},
                    {value:window.sessionStorage.getItem('fail'), name:'不及格'},
                ],

                // this.checkfresh();
                  // this.charts.setOption(this.opinion1Data, {
                  //     notMerge: false,
                  //     lazyUpdate: false,
                  //     silent: false
                  // });
                console.log("-----??????????----------")

            },
            check(){
                _this.$message.success('111')
                this.$router.replace('/register')
            },
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    color: ['#4E7095', '#A4B6C9'],/*饼状图的颜色*/
                    tooltip : {
                        trigger: 'item',
                        formatter: "{c}人{b}({d}%)",/*饼状图触碰之后显示的注释文字*/
                    },
                    legend: {
                        left: 'center',/*标签文字排成一行*/
                        y: 'bottom',/*在垂直方向上的底部*/
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ['50%', '40%'],
                            name:'',
                            type:'pie',
                            radius:['0%','60%'],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    borderWidth: 5,
                                    borderColor: '#fff',
                                },
                            },

                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show:true,
                                    position:'inner',
                                    textStyle: {
                                        fontWeight: 200,
                                        fontSize: 24
                                    },
                                    formatter: '{d}%',
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.opinion1Data,
                        }
                    ]
                })
            },
            check(){
                _this.$message.success('111')
                this.$router.replace('/register')
            },
            draw2Pie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    color: ['#09A343', '#FF3300'],/*饼状图的颜色*/
                    tooltip : {
                        trigger: 'item',
                        formatter: "{c}人{b}({d}%)",/*饼状图触碰之后显示的注释文字*/
                    },
                    legend: {
                        left: 'center',/*标签文字排成一行*/
                        y: 'bottom',/*在垂直方向上的底部*/
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ['50%', '40%'],
                            name:'',
                            type:'pie',
                            radius:['0%','60%'],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    borderWidth: 5,
                                    borderColor: '#fff',
                                },
                            },

                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show:true,
                                    position:'inner',
                                    textStyle: {
                                        fontWeight: 200,
                                        fontSize: 24
                                    },
                                    formatter: '{d}%',
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.opinion2Data,
                        }
                    ]
                })
            }
        },
        //调用

    }


</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }
  .course-area {
    width: 990px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>
